<template>
  <view class="login-bar" :style="{top: `${$statusBarHeight + props.top}px`}"  :class="isShowLoginBar ? 'show' : ''">
    <view class="caton-icon"></view>
    <view class="con-m" @click="gotoLogin">
      <view>登录即可解锁更多精彩～{{ props.isShowNumber }}</view>
      <view class="u-center">
        <view>立即登录</view>
        <view class="triangle-r"></view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { getCurrentInstance, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { TOKEN } from '@/assets/js/config'
import { storage } from '@/utils/utils'
const { $statusBarHeight } = getCurrentInstance().appContext.config.globalProperties
const props = defineProps({
  top: {
    type: Number,
    default: 70
  },
  isShowLoginBar: {
    type: Boolean,
    default: false
  }
})
const gotoLogin = () => {
  if (isShowLoginBar.value) {
    // eslint-disable-next-line no-undef
    const pages = getCurrentPages()
    uni.redirectTo({
      url: `/pages/login?redirect=${encodeURIComponent(pages[pages.length - 1].$page.fullPath)}`
    })
  }
}
const isShowLoginBar = ref(false)
onShow(() => {
  isShowLoginBar.value = !storage.get(TOKEN)
})
</script>

<style scoped lang="scss">
.login-bar{
  position: fixed;
  left: calc(45rpx + 101vw);
  top: 200rpx;
  width: 660rpx;
  height: 64rpx;
  border-radius: 200px;
  background: #414141;
  box-shadow: 0px 6rpx 10rpx 0px rgba(0, 0, 0, 0.2);
  color: #FFFBA9;
  font-weight: bold;
  font-size: 26rpx;
  z-index: 9999;
  padding: 0 24rpx 0 100rpx;
  opacity: 0;
  transition: all 0.3s;
  &.show{
    opacity: 1;
    left: 45rpx;
  }
  .caton-icon{
    position: absolute;
    left: 6rpx;
    bottom: 4rpx;
    width: 85rpx;
    height: 82rpx;
    background: url(https://img.qumoyugo.com/webimgbg/picopino_icon_login_bar_catoon.png) no-repeat;
    background-size: 100%;
  }
  .con-m{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60rpx;
  }
  .triangle-r{
    width: 0;
    height: 0;
    border-top: 12rpx solid transparent;
    border-bottom: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
    border-left: 12rpx solid #FFFBA9;
    margin-left: 10rpx;
  }
}
</style>
